<template>
    <view class="traveler-list-container">
        <!-- 出行人列表 -->
        <view class="traveler-list">
            <view class="traveler-item">
                <text>出行人</text>
                <text>手机号</text>
                <text>行李数</text>
                <text>操作</text>
            </view>
            <view
                v-for="traveler in travelers"
                :key="traveler.id"
                class="traveler-item"
                @click="selectTraveler(traveler.id)"
                :class="{ selected: selectedIds.has(traveler.id) }"
            >
                <text>
                    {{ traveler.name }}
                </text>
                <text>{{ traveler.phone }}</text>
                <text>{{ traveler.luggage_count }}</text>
                <text>
                    <u-icon name="edit-pen" @click="editTraveler(traveler.id)" />
                </text>
            </view>
            <!-- 空数据提示 -->
            <view v-if="travelers.length === 0" class="empty-state"> 暂无出行人信息</view>
        </view>

        <!-- 按钮操作 -->
        <view class="actions btn-footer">
            <button class="commit_btn" @click="addTraveler">新增</button>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref, onUnmounted } from 'vue'
import { getTravelerList } from '@/api/user'
import { onLoad } from '@dcloudio/uni-app'

const travelers = ref<any[]>([]) // 从接口取数据
const selectedIds = ref<Set<number>>(new Set()) // 使用 Set 提升性能

const travelersList = async () => {
    try {
        travelers.value = await getTravelerList()
    } catch (error) {
        uni.showToast({ title: '加载出行人失败', icon: 'none' })
        console.error('Failed to fetch traveler list:', error)
    }
}

// 页面加载
onLoad(() => {
    travelersList()
})

// 页面卸载时清理事件
onUnmounted(() => {
    uni.$off('travelersSelected') // 移除监听器（如有）
})

// 新增出行人
function addTraveler() {
    const EDIT_PAGE_URL = '/pages/traveler_edit/traveler_edit?mode=add'
    uni.navigateTo({ url: EDIT_PAGE_URL })
}

// 选择/取消选择
function selectTraveler(id: number) {
    const ids = new Set(selectedIds.value)
    if (ids.has(id)) {
        ids.delete(id)
    } else {
        ids.add(id)
    }
    selectedIds.value = ids
}

function editTraveler(id: number) {
    uni.navigateTo({
        url: `/pages/traveler_edit/traveler_edit?mode=edit&id=${id}`
    })
}

// 确认选择
function confirmSelection() {
    // 过滤无效 ID（如数据已变更）
    const validIds = Array.from(selectedIds.value).filter((id) =>
        travelers.value.some((t) => t.id === id)
    )
    const selected = travelers.value.filter((t) => validIds.includes(t.id))
    uni.$emit('travelersSelected', selected)
    uni.navigateBack()
}
</script>

<style scoped lang="scss">
.traveler-list-container {
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.traveler-list {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 20rpx;
    background-color: white;
    border-radius: 16rpx;
}

.traveler-item {
    padding: 20rpx;
    margin-bottom: 20rpx;
    justify-content: space-between;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
}

.empty-state {
    text-align: center;
    color: #999;
    margin-top: 100rpx;
}

.btn-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx;
}
</style>
